<template>
	<view>
		<view class="fixed-top bg-white">
              <!-- <u-navbar :is-back="true" :is-fixed="true" title="需求详情" ></u-navbar> -->
			<view class="px-2 mt-2 pb-2 dfes">
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="keyword" @input="search" :action-style="actionStyle"></u-search>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>
		<view class="mt-12">
			<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 0px);" :show-scrollbar="false"
				@scrolltolower="loadMore" @scrolltoupper="refresh">
				<view class="mt-1 dfel u-line pl-2 pr-2 py-3 pb-2 mb-2" v-for="(item, index) in newlist" :key="index"
					@click="openPolicyDetails(item.id)">
					<view>
						<view  class="text-333333 font-14 wraps">{{item.title}}</view>
				
						<view class="mt-2 lineHights font-12 text-999999">
							<view>来源：{{item.source}}</view>
							<view>时间：{{item.updateTime.slice(0, 10)}}</view>
						</view>
					</view>
					<view v-if="item.cover" class="p-1">
						<u-lazy-load
						style="width: 145px;  height: 95px; border-radius:5px"
							:image="getFullImageUrl(item.cover)"></u-lazy-load>
					</view>
					<view v-else>
						<u-lazy-load
						style="width: 145px; height: 95px; border-radius:5px"
						v-if="item.cover"
							:image="getFullImageUrl(item.cover)" ></u-lazy-load>
					</view>
				</view>
				<view v-if="!hasMore && newlist.length > 0" class="text-center mt-3 pb-3">
					<view class="text-muted">没有更多数据了</view>
				</view>
				<view v-else-if="!hasMore && newlist.length === 0" class="text-center mt-3 mb-3">
					<view class="iconfont text-999999 icon-zanwushuju font-48 pb-1"></view>
					<view class="text-999999 font-15">到底了</view>
				</view>
				<view v-else class="text-center mt-3 mb-3">
					<view class="btn btn-primary">加载更多</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				newlist: [],
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
				errorImg: '',
				loadingImg: '',
			}
		},
		onShow() {
			this.NewList();
			this.newlist = []
		},
		methods: {
			setDefaultPageConfig() {
				this.form.pageNo = 1
				this.form.pageSize = 10
				this.form.total = 0
			},
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
            search() {
            	if (this.keyword.trim() === '') {
            		// 如果关键字为空，则显示原始数据
            		this.isSearching = false;
					this.hasMore = true;
					this.newlist = []
					this.setDefaultPageConfig()
					this.NewList()
            		return;
            	}
				this.setDefaultPageConfig()
            	this.newlist = []
            	this.NewList()
            },
			NewList() {
				$H.get('/basisInform/policyRelease/agriculture/list', {
					...this.form,
					title: this.keyword.trim(),
				}, {}).then(res => {
					this.newlist = [...this.newlist, ...res.result.records];
					this.form.total = res.result.total;
					this.hasMore = this.newlist.length < this.form.total;
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			openPolicyDetails(id) {
				// 跳转到详情页，并传递id参数
				uni.navigateTo({
					url: `/pages/tabbar/index/policyDetails?id=${id}`
				});
			},
			// 加载更多
			loadMore() {
				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.NewList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.newlist = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.NewList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
		}
	}
</script>

<style>
</style>